<template>
  <view class="feedback">
    <view class="feedback-title">
      <view class="marker-detail">
        <view class="marker-detail-name">
          <view class="shopName">{{shopInfo.shopName}}</view>
        </view>
        <view class="marker-detail-time">
          <image src="@/static/images/time.png" mode=""></image> <text>{{shopInfo.workTime}}</text>
        </view>
        <view class="marker-detail-location">
          <image src="@/static/images/locatedIcon.png" mode=""></image> <text>{{shopInfo.address}}</text>
        </view>
      </view>
    </view>
    <view class="feedback-question">
      <view class="feedback-choose">
        请选择您要反馈的问题
      </view>
      <view class="feedback-tag">
        <ul>
          <li @click="clickOnQuestionType(item, index)" :class="{ 'active': selectedIndex === index }"
            v-for="(item,index) in questionType" :key="index"><text>{{item.name}}</text></li>
        </ul>
      </view>
    </view>
    <view class="feedback-info">
      <view class="feedback-info-title">
        反馈内容
      </view>
      <view class="feedback-input">
        <van-field style="height: 100%;" :value="feedback" @change="handleChange" type="textarea"
          placeholder="请描述您的问题, 以便我们尽快处理..." maxlength="500" :border="false" show-word-limit />
      </view>
      <view class="feedback-upload">
        <view class="feedback-info-title">
          图片凭证
        </view>
        <van-uploader :file-list="fileList" @after-read="afterRead" max-count="4">
          <view class="uploader-info">
            <van-icon name="plus" />
            <text>添加图片</text>
          </view>
        </van-uploader>
      </view>
    </view>
    <view class="feedback-btn">
      <van-button @click="handleSubmit" color="linear-gradient(#0366E0, #1E50DC)" type="info">提交反馈
      </van-button>
    </view>
  </view>
</template>

<script>
  import {
    createFeedBack
  } from '@/api/shop'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        fileList: [],
        selectedIndex: 0,
        feedback: '',
        questionType: [{
            id: 1,
            name: '没找到门店'
          },
          {
            id: 2,
            name: '门店信息不符'
          },
          {
            id: 3,
            name: '门店信息'
          },
          {
            id: 4,
            name: '门店没有设备'
          },
          {
            id: 5,
            name: '其他问题'
          },
        ],
        shopInfo: {},
        feedbackImg: ''
      }
    },
    computed: {
      ...mapGetters(['token'])
    },
    onLoad(options) {
      if (Object.keys(options).length > 0) {
        this.shopInfo = JSON.parse(options.shopInfo)
      }
    },
    methods: {
      clickOnQuestionType(item, index) {
        this.selectedIndex = index; // 更新被选中的索引
        // 执行其他操作...
      },
      async afterRead(e) {
        const {
          API_BASE_URL
        } = process.env.NODE_ENV === 'production' ? require('@/utils/prod.env') : require('@/utils/dev.env')
        // 显示加载中的弹窗
        wx.showLoading({
          title: '上传中',
          mask: true
        });
        wx.uploadFile({
          url: `${API_BASE_URL}/file/upload`,
          filePath: e.detail.file.url,
          name: 'file',
          header: {
            Authorization: this.token
          },
          formData: {
            user: 'test'
          },
          success: (res) => {
            const data = JSON.parse(res.data)
            this.fileList.push({
              ...e.detail.file,
              id: data.data.fileId,
              url: `${API_BASE_URL}${data.data.fileAccessUrl}`
            })
            const ids = this.fileList.map(file => file.id).join(',');
            this.feedbackImg = ids
          },
          complete: () => {
            // 隐藏加载中的弹窗
            wx.hideLoading();
          }
        });
      },
      handleChange(e) {
        this.feedback = e.detail
      },
      async handleSubmit() {
        const obj = {
          feedbackDetail: this.feedback,
          feedbackImg: this.feedbackImg,
          storeId: this.shopInfo.id,
          feedbackType: this.selectedIndex + 1
        }
        await createFeedBack({
          ...obj
        })
        uni.showToast({
          title: '反馈成功'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      }
    }
  }
</script>

<style lang="less" scoped>
  .feedback {
    padding-top: 15px;
    background-color: #f9f9f9;

    .feedback-title {
      background-color: #FFFFFF;
      margin: 0 10px 15px;
      padding-top: 15px;

      .marker-detail {
        margin: 0 20px;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .marker-detail-name {
          display: flex;
          padding-bottom: 15px;

          .shopName {
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
          }

          .question {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 12px;
            color: #105BDE;
            flex: 0.4;

            image {
              width: 14px;
              height: 14px;
              object-fit: contain;
              margin-top: 2px;
              margin-right: 5px;
            }
          }
        }

        .marker-detail-time,
        .marker-detail-location {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #555555;
          padding-bottom: 15px;

          image {
            width: 14px;
            height: 14px;
            object-fit: contain;
          }

          text {
            margin-left: 5px;
          }
        }
      }
    }

    .feedback-question {
      background-color: #FFFFFF;
      padding: 15px 15px 0px;
      margin: 10px;

      .feedback-choose {
        font-size: 16px;
      }

      .feedback-tag {
        padding-top: 12px;

        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            display: inline-block;
            padding: 6px 15px;
            box-sizing: border-box;
            margin-bottom: 15px;
            font-size: 14px;
            color: #999999;
            margin-right: 8px;

            text {}

            &:hover {
              cursor: pointer;
            }
          }

          li.active {
            box-shadow: 0 0 0 1px #105BDE;
            background-color: #E2EFFF;
            color: #105BDE;
            border-radius: 5px;
            text-align: center;
          }
        }
      }

      .feedback-tag li:nth-child(4),
      .feedback-tag li:nth-child(5) {
        padding: 6px 12px;
        margin-right: 6px;
      }
    }

    .feedback-info {
      background-color: #FFFFFF;
      padding: 15px 15px 18px;
      margin: 10px;

      .feedback-info-title {
        font-size: 16px;
      }

      ::v-deep .van-cell {
        background-color: #f6f6f6;
        margin-top: 10px;
        padding: 10px;
        border-radius: 10rpx;
      }

      // ::v-deep .van-field__body--textarea {
      //   height: 114px;
      //   line-height: unset;
      // }
      ::v-deep textarea {
        height: 260rpx !important;
      }

      ::v-deep .van-field__body {
        align-items: unset;
      }

      .feedback-upload {
        margin-top: 15px;

        ::v-deep .van-uploader {
          margin-top: 10px;
        }

        .uploader-info {
          width: 100px;
          height: 100px;
          background-color: #f6f6f6;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border: 1px solid #D9D9D9;

          ::v-deep .van-icon {
            font-weight: 700 !important;
            font-size: 20px !important;
            color: #adadad;
          }

          text {
            font-size: 12px;
            margin-top: 5px;
            color: #adadad;
          }
        }
      }
    }

    .feedback-btn {

      padding: 0 25px;

      ::v-deep .van-button {
        margin: 74rpx 0;
        height: 49px;
        width: 100%;
      }

      ::v-deep .van-button--normal {
        border-radius: 10px;
      }
    }

    ::v-deep .van-uploader__preview-image {
      width: 100px !important;
      height: 100px !important;
    }

    ::v-deep .van-uploader {
      z-index: 999;
    }

    ::v-deep .van-uploader__wrapper {
      z-index: 999;
      /* 确保点击事件可以正确传递 */
    }
  }
</style>
